<template>
  <div class="app-container">
    <div class="filter-container" style="margin-top:5px; margin-bottom:16px">

      &nbsp;&nbsp;&nbsp;&nbsp;
      <el-select v-model="listQuery.tenantId" placeholder="租户ID" clearable class="filter-item">
        <el-option v-for="item in tenantOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
      </el-select>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <el-select v-model="listQuery.itemId" placeholder="项目ID" clearable class="filter-item">
        <el-option v-for="item in projectOptions" :key="item.key" :label="item.display_name"
                   :value="item.key"/>
      </el-select>

      &nbsp;&nbsp;&nbsp;&nbsp;
      <el-input v-model="listQuery.tpId" placeholder="线程池ID" style="width: 200px;" class="filter-item"/>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <el-button v-waves class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button v-waves class="filter-item" type="primary" plain icon="el-icon-refresh" @click="handleReset">
        重置
      </el-button>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" type="success" plain
                 icon="el-icon-circle-plus-outline" @click="handleCreate">
        新增
      </el-button>
    </div>

    <el-table :key="tableKey" v-loading="listLoading" :data="listData" stripe border fit highlight-current-row
              style="width: 100%;">
      <el-table-column label="操作栏" class-name="status-col" width="200" align="center">
        <template slot-scope="{row,$index}">
          <el-button type="info" icon="el-icon-search" circle @click="lookInfo(row)"></el-button>
          <el-button type="primary" plain icon="el-icon-edit" circle @click="editInfo(row)"></el-button>
          <!--<el-button type="danger" slot="reference" plain icon="el-icon-delete" circle @click="delInfo(row)"></el-button>-->
        </template>
      </el-table-column>

      <el-table-column label="租户ID" prop="tenantId" width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.tenantId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目ID" prop="itemId" width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.itemId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="线程池ID" prop="tpId" width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.tpId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="核心线程数" prop="coreSize" width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.coreSize }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最大线程数" prop="maxSize" width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.maxSize }}</span>
        </template>
      </el-table-column>
      <el-table-column label="队列类型" prop="queueType" width="300" align="center" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          <span>{{ row.queueType | queueFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="队列大小" prop="capacity" width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.capacity }}</span>
        </template>
      </el-table-column>
      <el-table-column label="线程存活时间" prop="keepAliveTime" width="120" align="center">
        <template slot-scope="{row}">
          <span>{{ row.keepAliveTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否报警" prop="isAlarm" width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.isAlarm | alarmFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="容量报警" prop="capacityAlarm" width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.capacityAlarm }}</span>
        </template>
      </el-table-column>
      <el-table-column label="活跃度报警" prop="livenessAlarm" width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.livenessAlarm }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="gmtCreate" width="180" align="center">
        <template slot-scope="{row}">
          <span>{{ row.gmtCreate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="修改时间" prop="gmtModified" width="180" align="center">
        <template slot-scope="{row}">
          <span>{{ row.gmtModified }}</span>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                @pagination="getList"/>

    <!-- 线程池创建模态框 -->
    <el-dialog :title="dialogStatus" :visible.sync="dialogFormVisible" top="50px" width="45%">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px">

            <el-form-item prop="tenantId" label="租户ID" v-if="isShow">
              <el-select v-model="temp.tenantId" placeholder="" clearable class="filter-item"
                         style="width: 100%" :disabled="isLook">
                <el-option v-for="item in tenantOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
              </el-select>
            </el-form-item>

            <el-form-item prop="itemId" label="项目ID"  v-if="isShow">
              <el-select v-model="temp.itemId" placeholder="" clearable class="filter-item"
                         style="width: 100%" :disabled="isLook">
                <el-option v-for="item in projectOptions" :key="item.key" :label="item.display_name"
                           :value="item.key"/>
              </el-select>
            </el-form-item>

            <el-form-item prop="tpId" label="线程池ID" v-if="isShow">
              <el-input v-model="temp.tpId" :disabled="isLook"></el-input>
            </el-form-item>

            <el-form-item prop="coreSize" label="核心线程数">
              <el-input v-model="temp.coreSize" :disabled="isLook"></el-input>
            </el-form-item>

            <el-form-item prop="maxSize" label="最大线程数">
              <el-input v-model="temp.maxSize" :disabled="isLook"></el-input>
            </el-form-item>

            <el-form-item prop="queueType" label="队列类型">
              <el-select v-model="temp.queueType" placeholder="" clearable class="filter-item"
                         style="width: 100%" :disabled="isLook">
                <el-option v-for="item in calendarTypeOptions" :label="item.display_name" :value="item.key"/>
              </el-select>
            </el-form-item>

            <el-form-item prop="capacity" label="队列大小">
              <el-input v-model="temp.capacity" :disabled="isCapacity"></el-input>
            </el-form-item>

            <el-form-item prop="keepAliveTime" label="线程存活时间">
              <el-input v-model="temp.keepAliveTime" :disabled="isLook"></el-input>
            </el-form-item>

            <el-form-item prop="isAlarm" label="是否报警">
              <el-radio-group v-model="temp.isAlarm" size="medium" :disabled="isLook">
                <el-radio :label="0">报警</el-radio>
                <el-radio :label="1">不报警</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item prop="capacityAlarm" label="容量报警">
              <el-input v-model="temp.capacityAlarm" :disabled="isLook"></el-input>
            </el-form-item>

            <el-form-item prop="livenessAlarm" label="活跃度报警">
              <el-input v-model="temp.livenessAlarm" :disabled="isLook"></el-input>
            </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button v-if="!isLook" :loading="btnLoading" type="primary" @click="createData()">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import waves from '@/directive/waves'
  import Pagination from '@/components/Pagination'
  import { MessageBox, Message } from 'element-ui'
  import api from '/src/api/threadPoolApi'
  import t_api from '/src/api/tenantApi'
  import p_api from '/src/api/projectApi'

  export default {
    name: 'ComplexTable',
    components: { Pagination },
    directives: { waves },
    filters: {
      alarmFilter(alarm) {
        if (alarm == '0') {
          return '报警'
        } else if (alarm == '1') {
          return '不报警'
        }
      },
      queueFilter(type) {
        if ('1' == type) {
          return 'ArrayBlockingQueue'
        } else if ('2' == type) {
          return 'LinkedBlockingQueue'
        } else if ('3' == type) {
          return 'LinkedBlockingDeque'
        } else if ('4' == type) {
          return 'SynchronousQueue'
        } else if ('5' == type) {
          return 'LinkedTransferQueue'
        } else if ('6' == type) {
          return 'PriorityBlockingQueue'
        } else if ('9' == type) {
          return 'ResizableLinkedBlockingQueue'
        }
      }
    },
    data() {
      return {
        tableKey: 0,
        listData: [],//存放表格数据
        total: 0,
        listLoading: false,
        listQuery: {//查询条件
          page: 1,
          limit: 10,
          tenantId: '',
          itemId: '',
          tpId: ''
        },
        isLook: false,
        isShow: true,
        isCapacity: false,
        btnLoading: false,
        calendarTypeOptions: [
          { key: 1, display_name: 'ArrayBlockingQueue' },
          { key: 2, display_name: 'LinkedBlockingQueue' },
          { key: 3, display_name: 'LinkedBlockingDeque' },
          { key: 4, display_name: 'SynchronousQueue' },
          { key: 5, display_name: 'LinkedTransferQueue' },
          { key: 6, display_name: 'PriorityBlockingQueue' },
          { key: 9, display_name: 'ResizableLinkedBlockingQueue' }
        ],
        tenantOptions: [],
        projectOptions: [],
        temp: {},
        dialogFormVisible: false,
        dialogStatus: '',
        dialogType: '',
        rules: {
          tpId: [{ required: true, message: '请选择', trigger: 'blur' }],
          tenantId: [{ required: true, message: '请输入', trigger: 'blur' }],
          itemId: [{ required: true, message: '请选择', trigger: 'blur' }],
          coreSize: [{ required: true, message: '请输入', trigger: 'blur' }],
          maxSize: [{ required: true, message: '请输入', trigger: 'blur' }],
          queueType: [{ required: true, message: '请选择', trigger: 'blur' }],
          capacity: [{ required: true, message: '请输入', trigger: 'blur' }],
          keepAliveTime: [{ required: true, message: '请输入', trigger: 'blur' }],
          isAlarm: [{ required: true, message: '请输入', trigger: 'blur' }],
          capacityAlarm: [{ required: true, message: '请输入', trigger: 'blur' }],
          livenessAlarm: [{ required: true, message: '请输入', trigger: 'blur' }]
        }
      }
    },
    created() {
      //初始化加载
      this.getList();
      //初始化下拉框
      this.initSelect();
    },
    methods: {

      //查询线程池列表
      getList() {
        this.listLoading = true;
        api.fetchList(this.$ajax, this.listQuery).then(rData => {
          if (rData.success) {
            //表格数据 用于表格展示
            this.listData = rData.data.records;
            //数据总数 用于分页
            this.total = rData.data.total;
          }
          this.listLoading = false;
        })
      },
      //查询线程池列表
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      //重置查询条件
      handleReset() {
        this.listQuery = {
          tenantId: '',
          itemId: '',
          tpId: ''
        };
        this.getList();
      },
      //新增线程池模态框
      handleCreate() {
        this.dialogStatus = '新增';
        this.dialogType = 'create';
        this.temp = {};
        this.dialogFormVisible = true;
        this.isLook = false;
        this.isShow = true;
        this.btnLoading = false;
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      //查看线程池信息
      lookInfo(row) {
        let _dto = {
          tenantId: row.tenantId,
          itemId: row.itemId,
          tpId: row.tpId
        };
        this.temp = {};
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        });
        //获取查看模态框所需数据
        api.queryNameSpace(this.$ajax, _dto).then(rData => {
          if (rData.success) {
            if (rData.data == null) {
              this.message('error', '查询失败！');
              return
            }
            this.temp = rData.data;

            this.dialogStatus = '查看';
            this.dialogType = 'look';
            this.isLook = true;
            this.isShow = true;
            this.isCapacity = true;
            this.dialogFormVisible = true;
          }
          this.listLoading = false;
        }).catch(rData => {
          this.listLoading = false;
          this.message('error', rData.message)
        })
      },

      //编辑线程池信息
      editInfo(row) {
        let _dto = {
          tenantId: row.tenantId,
          itemId: row.itemId,
          tpId: row.tpId
        };
        this.temp = {};
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        });
        //获取编辑模态框所需数据
        api.queryNameSpace(this.$ajax, _dto).then(rData => {
          if (rData.success) {
            if (rData.data == null) {
              this.message('error', '查询失败！');
              return
            }
            this.temp = rData.data;
            if (rData.data.queueType == 9) {
              //RESIZABLE_LINKED_BLOCKING_QUEUE 队列可以动态修改队列大小
              this.isCapacity = false
            } else {
              this.isCapacity = true
            }

            this.dialogStatus = '编辑';
            this.dialogType = 'edit';
            this.isLook = false;
            this.isShow = false;
            this.dialogFormVisible = true;
            this.btnLoading = false;
          }
          this.listLoading = false;
        }).catch(rData => {
          this.listLoading = false;
          this.message('error', rData.message)
        })
      },

      //弹框信息
      message(type, message) {
        this.$message({
          type: type,
          message: message
        })
      },

      //保存线程池信息
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            api.saveData(this.$ajax, this.temp).then(() => {
              //关闭模态框
              this.dialogFormVisible = false;
              this.btnLoading = false;
              this.getList();//刷新表格
              this.message('success', '保存成功！');
            }).catch(rData => {
              this.btnLoading = false;
              this.message('error', rData.message);
            })
          }
        })
      },

      //删除线程池信息
      delInfo(row) {
        let _dto = {
          tenantId: row.tenantId,
          itemId: row.itemId,
          tpId: row.tpId
        };
        MessageBox.confirm('此操作不可逆，确认要删除吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.deleteData(this.$ajax, _dto).then(() => {
            //关闭模态框
            this.dialogFormVisible = false;
            this.btnLoading = false;
            this.getList();//刷新表格
            this.message('success', '删除成功！');
          }).catch(rData => {
            this.btnLoading = false;
            this.message('error', rData.message)
          })
        })
      },
      initSelect : function () {
        //初始化租户ID下拉框
        t_api.fetchList(this.$ajax, {}).then(rData => {
          if (rData.success) {
            var data = rData.data.records;
            console.log(data)
            for (var i = 0; i < data.length; i++) {
              this.tenantOptions.push({key: data[i].tenantId, display_name: data[i].tenantId});
            }
          }
        });
        //初始化项目ID下拉框
        p_api.fetchList(this.$ajax, this.listQuery).then(rData => {
          if (rData.success) {
            var data = rData.data.records;
            for (var i = 0; i < data.length; i++) {
              this.projectOptions.push({key: data[i].itemId, display_name: data[i].itemId});
            }
          }
        });
      }
    }
  }
</script>
